/*
  隔行变色：
    1. 静态的网页: public/index.html
    2. 下载jquery 并导入 到 main.js中
        npm i jquery -S
        yarn add jquery -S
        import $ from 'jquery'
    3. 编写隔行变色的代码
    4. 打包: yarn build
    5. 在静态的网页 引入 打包后的 js文件
*/
// 导入jquery
import $ from 'jquery'

$('ul li').each(function(i, el){
  $(el).css('color', i % 2 === 1 ? 'red' : 'green')
})

/**
 * 
 * html-webpack-plugin
 * 1. 自动生成一个html文件到dist中
 * 2. 在生成的html文件 中 自动 引入打包后到所有代码
 * 
 * 
 * 1. 下载
      npm i html-webpack-plugin -D
   2. 加入到webpack的配置中
 * 
 */



// 打包css
import './assets/css/style.css'

/*
  loader：加载器
  步骤： css-loader  style-loader
  css-loader: 把css打包到js中，让js能够解析css语法
  style-loader: 把打包后到css代码插入到DOM中

  1. 下载css-loader  style-loader
  2. 加入webpack的配置中
*/

// 引入less到入口
import './assets/less/index.less'
// 创建一个img标签。设置src属性，并插入到body中
import imgUrl from './assets/image/logo.png'
let oImg = document.createElement('img')
oImg.src = imgUrl
document.body.appendChild(oImg)

//打包字体图标
/*
  步骤：
  1. 准备代码
  2. 准备环境
  3. 打包观察效果
*/
// 导入字体图标的样式
import './assets/font/iconfont.css'
let i1 = document.createElement('i')
let i2 = document.createElement('i')
i1.className = 'iconfont icon-qq'
i2.className = 'iconfont icon-weixin'
document.body.appendChild(i1)
document.body.appendChild(i2)


const fn = () => {
  console.log('我是一个箭头函数')
}
console.log(fn)

/*
  webpack降级js高级语法：
    借助：babel编译工具
  1. 准备代码
    
  2. 准备环境
    1. 下载
        babel-loader
        @babel/core
        @babel/preset-env
    2. 配置

  3. 打包观察效果
*/
















